<template>
  <div class="box-show">
    <div class="z gonggao">
      <div class="gg-left title">
        <div class="gg-title" style="text-align: left">
          <el-button
            type="primary"
            size="mini"
            @click="$router.push({ path: '/Commodity/Brand/Add' })"
            ><i class="el-icon-plus"></i>新增品牌</el-button
          >
        </div>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          size="mini"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <el-table-column fixed type="index" width="50"> </el-table-column>
          <el-table-column prop="name" label="品牌中文名"> </el-table-column>
          <el-table-column prop="en_name" label="品牌英文名"> </el-table-column>
          <el-table-column prop="contacts_name" label="联系人" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" width="150">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="update(scope.$index, scope.row)"
                type="text"
                size="small"
              >
                修改
              </el-button>
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="你确认删除这个仓库吗？"
                @onConfirm="del(tableData[scope.$index].id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="small"
                  style="color:#909399;padding: 0 10px"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.pageSize"
            :total="page.total"
            @current-change="currentChange"
            @prev-click="prevClick"
            @next-click="nextClick"
            :small="true"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { brand_getAll, brand_del } from "@/utils/do";
export default {
  name: "List",
  props: {},
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 20, // 每页显示条数
        total: 0 //总条数
      },
      visible: false
    };
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    // 是否绑定cloud
    is_binding(row) {
      return row.is_binding == 0 ? "未绑定" : "已绑定";
    },
    // 修改事件
    update(index, row) {
      console.log(index + "," + row);
      this.$router.push({
        name: "brandListUpdate",
        params: {
          id: row.id
        }
      });
    },
    // 删除仓库
    del(id) {
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      console.log(id);
      brand_del(id, res => {
        this.$store.commit("setIsLoading", false);
        res.code != 0
          ? _this.$message.error(res.msg)
          : _this.$message.success("删除成功");
        this.getAll(1, 1, this.page.pageSize);
      });
    },
    // 获取仓库列表
    getAll(page, limit) {
      this.$store.commit("setIsLoading", true);
      let _this = this;
      brand_getAll(page, limit, res => {
        console.log(res);
        this.$store.commit("setIsLoading", false);
        if (res.code == 0) {
          _this.tableData = res.date.list;
          _this.totol = res.date.totol;
        }
      });
    },
    // eslint-disable-next-line no-unused-vars
    currentChange(e) {
      console.log("改变了当前页", e);
      this.getAll(e, this.page.pageSize);
    },
    prevClick(e) {
      console.log("点了上一步", e);
      this.getAll(e, this.page.pageSize);
    },
    nextClick(e) {
      console.log("点了下一步", e);
      this.getAll(e, this.page.pageSize);
    }
  },
  mounted() {
    this.getAll(1, this.page.pageSize);
  }
};
</script>

<style scoped></style>
